<template>
  <common-page>
    <view class="login-wrapper">
			<!-- logo -->
			<u--image src="/static/logo.png" width="100px" height="100px" />
			<!-- 描述 -->
			<view class="desc">立即登录 享受完整服务</view>
			<!-- 授权登录按钮-->
			<view class="btn">
				<button type="primary" :disabled="disabled" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber" class="u-button--primary">手机号快捷登录</button>
			</view>
			<!-- 底部同意协议-->
      <view class="bottom">
				<u-checkbox-group v-model="radio">
					<u-checkbox label="我已阅读并同意" shape="circle" label-size="12" size="14" name="1" />
				</u-checkbox-group>
				<u-link href="javascript:;" text="《个人信息保护及隐私政策》" font-size="12" />
			</view>
    </view>
  </common-page>
</template>

<script>
// noinspection NpmUsedModulesInstalled
import { mapActions } from 'vuex';
import UImage from '../../uni_modules/uview-ui/components/u--image/u--image';
export default {
	components: { UImage },
	data() {
		return {
			btnDisabled: true,
			radio: [],
			redirect: ''
		};
	},
	computed: {
		disabled() {
			if (this.btnDisabled) return true;
			if (!this.radio.length) return true;
			return false;
		}
	},
	onLoad({ redirect = '' }) {
		this.redirect = decodeURIComponent(redirect);
		this.autoLogin();
	},
	methods: {
		...mapActions('user', ['loginInfo', 'updateUserInfo']),
		redirectPage() {
			// 如果没有 redirect 参数，跳转到我的页面
			if (!this.redirect) {
				uni.$u.route({ type: 'tab', url: 'pages/mine/index' });
				return;
			}
			// 判断一下，如果是 device/index，data/index, mine/index 等页面，使用 tab 跳转，否则使用 redirect 跳转
			if (this.redirect.startsWith('pages/device/index') || this.redirect.startsWith('pages/data/index') || this.redirect.startsWith('pages/mine/index')) {
				uni.$u.route({ type: 'tab', url: this.redirect });
			} else {
				uni.$u.route({ type: 'redirect', url: this.redirect });
			}
		},
		autoLogin() {
			uni.login({
				provider: 'weixin',
				success: (res) => {
					if (res.errMsg !== 'login:ok') return;
					this.loginByCode(res.code);
				}
			});
		},
		// 根据 code 登录
		async loginByCode(code) {
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-auth/login', { code }));
			// 出错后直接返回
			if (err) return;
			// 登录成功后保存数据
			this.loginInfo(result);
			// 如果没有手机号，展示获取手机号，否则跳转页面
			if (!result.phone) {
				this.btnDisabled = false;
				return;
			}
			this.redirectPage();
		},
		async getUserInfo() {
			const [err, result] = await this.$to(uni.$u.http.get('/jeecg-boot/api/v1-public/mini-program-user/userInfo'));
			if (err) return;
			this.updateUserInfo(result);
		},
		// 手机号快捷登录
		async handleGetPhoneNumber(event) {
			if (event.detail.errMsg !== 'getPhoneNumber:ok') {
				uni.$emit('toast', '获取手机号失败');
				return;
			}
			const param = {
				encryptedData: event.detail.encryptedData,
				iv: event.detail.iv
			};
			const [err] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-user/decode-and-update-phone', param));
			if (err) return;
			// 更新用户数据
			await this.getUserInfo();
			// 跳转页面
			this.redirectPage();
		}
	}
};
</script>

<style lang="scss" scoped>
.login-wrapper {
  height: 100%;
  position: relative;
	padding-top: 30%;
	display: flex;
	flex-flow: column;
	align-items: center;

	.desc {
		padding: 30rpx 0;
		color: #999;
	}
	.btn {
		padding: 100rpx 40rpx 0;
		width: 100%;
	}

	.bottom {
		position: absolute;
		bottom: 30rpx;
		left: 40rpx;
		width: 100%;
		padding: 0 20rpx;
		display: flex;
	}
}
.u-button--primary {
	color: #fff;
	background-color: #3c9cff !important;
	border-color: #3c9cff;
	border-width: 1px;
	border-style: solid;
}
.u-button--primary[disabled] {
	opacity: 0.5;
}
//.bg {
//  position: absolute;
//  width: 100%;
//  height: 100%;
//  left: 0;
//  right: 0;
//  top: 0;
//  bottom: 0;
//  z-index: 1;
//  object-fit: cover;
//}
//.content {
//  width: 85%;
//  margin-top: 60%;
//  margin-bottom: 45%;
//  z-index: 11;
//  text-align: center;
//  font-size: 30rpx;
//  color: rgba(0, 0, 0, 1);
//}
//.header {
//  width: 85%;
//  margin-top: 60rpx;
//  font-size: 45rpx;
//  font-weight: 600;
//  color: rgba(0, 0, 0, 0.9);
//  z-index: 11;
//}
//.header-title {
//  font-size: 30rpx;
//  color: rgba(0, 0, 0, 0.7);
//  margin-top: 20rpx;
//  font-weight: bold;
//}
//
//.handle {
//  background-color: #5BE286;
//  border-radius: 20rpx;
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  color: #fff;
//  font-size: 35rpx;
//  padding: 20rpx 30rpx;
//  margin-bottom: 40rpx;
//}
</style>
